<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
	<head>
		<meta charset="utf-8">
		<meta name="author" content="Kodinger">
		<base th:href="${#request.getContextPath()}">
		<title>登录</title>
		<link th:rel="stylesheet" type="text/css" th:href="@{/static/css/bootstrap.css}" >
		<link th:rel="stylesheet" type="text/css" th:href="@{/static/css/my-login.css}">
		<link th:rel="stylesheet" th:href="@{/static/css/element_ui.css}">
	</head>
	<body class="my-login-page">
		<section class="h-100">
			<div class="container h-100">
				<div class="row justify-content-md-center h-100">
					<div class="card-wrapper">
						<div class="brand">
							<img th:src="@{/static/img/logo.jpg}">
						</div>
						<div class="card fat">
							<div class="card-body">
								<h4 class="card-title">Login</h4>
								<div id="app">
									<el-form :model="user" :rules="rules" ref="user" class="ruleForm">
										<el-form-item label="用户名" prop="useraccount">
											<el-input v-model="user.useraccount"></el-input>
										</el-form-item>
										<el-form-item  label="密码" prop="password">
											<el-input type="password" v-model="user.password" ></el-input>
										</el-form-item>
										<el-button type="primary" @click="submitForm('user')">登录</el-button>
										<el-button @click="resetForm('user')">重置</el-button>
									</el-form>
								</div>
							</div>
						</div>
						<div class="footer">
							Copyright &copy;
						</div>
					</div>
				</div>
			</div>
		</section>

		<script th:src="@{/static/js/jquery.min.js}"></script>
		<script th:src="@{/static/js/bootstrap.min.js}"></script>
		<script th:src="@{/static/js/vue.js}"></script>
		<script th:src="@{https://unpkg.com/axios/dist/axios.min.js}"></script>
		<script th:src="@{/static/js/element_ui.js}"></script>
		<script>
			var vue = new Vue({
				el:"#app",
				data:{
					user:{
						useraccount:"",
						password:""
					},
					rules:{
						useraccount:[
							{ required: true, message: '请输入用户名', trigger: 'blur' }
						],
						password:[
							{ required: true, message: '请输入密码', trigger: 'blur' }
						]
						
					}
				},
				methods:{
					   submitForm(user) {
				        this.$refs[user].validate((valid) => {
				          if (valid) {
								axios.post('/index/adminLogin',{
									userAccount: this.useraccount,
									userPassword: this.password
								})
								.then(function (response) {
									console.log(response);
								})
								.catch(function (error) {
									console.log(error);
								});
				          } else {
				            console.log('error submit!!');
				            return false;
				          }
				        });
				      },
				      resetForm(user) {
				        this.$refs[user].resetFields();
				      }
				}
			})
		</script>
	</body>
</html>
